<!--
 * @Author: your name
 * @Date: 2021-03-31 21:18:13
 * @LastEditTime: 2021-05-25 10:25:50
 * @LastEditors: Please set LastEditors
 * @Description: 文献集锦 => 详情
 * @FilePath: /medicine-web/src/views/document/detail/index.vue
-->
<template>
  <div class="document-detail-container">
    <!-- <div class="document-detail-container__bg"></div> -->
    <p class="document-detail__title font-pattern-5">
      {{artical.title}}
    </p>
    <p class="document-detail__author font-pattern-3" v-if="artical.author">
      作者: {{artical.author}}
    </p>
    <ul class="document-detail__attribute_back font-pattern-3">
      <!-- <li style="margin-right: 14px;">期刊：</li> -->
      <li>{{artical.journal_name}}.</li>
      <li style="margin-left: 5px;">{{artical.publish_date}};</li>
      <li style="margin-left: 5px;">{{artical.journal_roll}}:</li>
      <li style="margin-left: 5px;">{{artical.journal_page}}</li>
    </ul>
    <p class="document-detail__center font-pattern-7 rich-text" style="margin-bottom: 1em;" v-if="artical.viewpoint" v-html="'<p>' + '核心点: ' + artical.viewpoint + '</p>'">
    </p>
    <p class="document-detail__content font-pattern-7 rich-text" style="margin-bottom: 1em;" v-if="artical.abstract" v-html="'<p>' + '摘要: ' + artical.abstract + '</p>'">
    </p>
    <p class="document-detail__content font-pattern-7" v-if="artical.keyword" style="margin-bottom: 21px;"> 
      关键词：{{artical.keyword}}
    </p>
    <p class="document-detail__content font-pattern-10" v-if="artical.virus_type" style="margin-bottom: 13px;">
      溶瘤病毒类型：{{artical.virus_type}}
    </p>
    <p class="document-detail__content font-pattern-10" v-if="artical.tumor_type" style="margin-bottom: 13px;">
      肿瘤类型：{{artical.tumor_type}}
    </p>
    <p class="document-detail__content font-pattern-10" v-if="artical.inject_mode" style="margin-bottom: 13px;">
      给药方式：{{artical.inject_mode}}
    </p>
    <p class="document-detail__content font-pattern-10" v-if="artical.cure_method" style="margin-bottom: 32px;">
      联合疗法：{{artical.cure_method}}
    </p>
    <ul class="document-detail__attribute font-pattern-3" style="margin-bottom: 27px;">
      <li style="margin-right: 21px;" v-if="artical.pmid">PMID：{{artical.pmid}}</li>
      <li style="margin-right: 21px;" v-if="artical.doi">DOI：{{artical.doi}}</li>
      <li style="margin-right: 24px;" v-if="artical.source_url">来源链接：<a :href="artical.source_url" target="_blank">{{artical.source_url}}</a></li>
    </ul>
    <!-- <p class="font-pattern-3">原文地址：<a :href="artical.source_url" target="_blank">{{artical.source_url}}</a></p> -->
    <customBtn :btnStr="'下载'" @handClick="handleDownload(artical)"></customBtn>
    <customBtn :btnStr="'收藏'" @handClick="handleCollection"></customBtn>
    <a-popover v-model="showShare" trigger="click">
      <a slot="content" class="share-icon-list">
        <img style="width: 18px; height: 18px; cursor:pointer;" :src="require('@/assets/image/xinlang.png')" alt="" @click.stop="showXinLang(artical)">
        <img style="width: 18px; height: 18px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/qq.png')" alt="" @click.stop="showQQ(artical)">
        <img style="width: 20px; height: 20px; margin-left: 16px; cursor:pointer;" :src="require('@/assets/image/wechat.png')" alt="" @click.stop="showWechat(artical)">
      </a>
      <customBtn :btnStr="'分享'" @handClick="handleShare"></customBtn>
    </a-popover>
    <div class="wechat-qr-code__container" v-if="showQRCode">
      <div class="wechat-qr-code__title">手机微信扫码分享</div>
      <img class="wechat-qr-code__close" :src="require('@/assets/image/close.png')" alt="" @click.stop="showQRCode = false">
      <div id="wechat-qr-code"></div>
    </div>
    <div class="wechat-qr-code__modal" v-if="showQRCode" @click.stop="showQRCode = false"></div>
    <!-- 文献内容位置 -->
    <!-- <p class="document-detail__content font-pattern-3" v-if="artical.abstract" style="margin-bottom: 41px;">{{artical.abstract}}</p> -->
    <div class="pdf-container" v-if="artical.status == 1">
      <pdfView :url="artical && artical.annex && artical.annex[0] ? artical.annex[0] : ''"></pdfView>
    </div>
  </div>
</template>
<script>
import customBtn from '@/components/CustomBtn/index.vue'
import pdfView from '@/components/PdfView/index.vue'
import { saveAs } from 'file-saver'
import share from '@/utils/share'
export default {
  name: 'detail',
  components: { customBtn, pdfView },
  data () {
    return {
      showShare: false,
      showQRCode: false, // 生成二维码
      artical: {
        title: '', // 标题
        author: '', // 作者
        journal_name: '', // 期刊名称
        journal_page: '', // 页码
        journal_roll: '', // 卷
        publish_date: '', // 发表日期
        viewpoint: '', // 核心观点
        abstract: '', // 摘要
        source_url: '', // 原文链接地址
        annex: [], // 附件地址
        status: 0, // 是否加蒙版效果
      }
    }
  },
  methods: {
    async handleDownload (rawData) {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      if (this.artical.status != 1) {
        this.msgInfo('此文献尚未启用，无法下载')
        return
      }
      if (rawData && rawData.annex && rawData.annex.length > 0) {
        const download = await this.$action('doDownload', { user_id: this.getCookie('uid'), ids: this.$route.query.id, module: 0 })
        if (download) {
          // this.msgSuccess('下载成功')
          // saveAs(this.$uploadUrl + rawData.annex[0], rawData.annex[0].split('/')[rawData.annex[0].split('/').length - 1])
          this.$action('getFileBloc', { id: this.$route.query.id, user_id: this.getCookie('uid'), module: 0 })
        } else {
          this.msgSuccess('下载失败, 请稍后重试.')
        }
      } else {
        this.$message.info('暂无文件附件，无法下载。')
      }
    },
    async handleCollection () {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      if (this.artical.status != 1) {
        this.msgInfo('此文献尚未启用，无法收藏')
        return
      }
      if (this.$route.query.id) {
        const res = await this.$action('doCollection', { user_id: this.getCookie('uid'), ids: this.$route.query.id, module: 0 })
        if (res) {
          this.msgSuccess('收藏成功')
        } else {
          this.msgError('收藏失败')
        }
      }
    },
    handleShare () {
      if (!this.getCookie('uid')) {
        this.msgInfo('您还没有登录，正在跳转至登录界面...')
        setTimeout(() => {
          this.$router.push('/login')
        }, 1500)
        return
      }
      if (this.artical.status != 1) {
        this.msgInfo('此文献尚未启用，无法分享')
        return
      }
      this.showShare = true
    },
    showXinLang (rawData) {
      if (rawData.source_url) {
        share.toShareXinLang(rawData.source_url, rawData.title)
      } else {
        this.msgInfo('此文章暂无原文链接， 无法进行分享')
      }
    },
    showQQ (rawData) {
      if (rawData.source_url) {
        share.toShareQQZone(rawData.source_url, rawData.title, rawData.data.abstract ? rawData.abstract.replace(/<[^>]+>|&[^>]+;/g, '') : '', '')
      } else {
        this.msgInfo('此文章暂无原文链接， 无法进行分享')
      }
    },
    showWechat (rawData) {
      if (rawData.source_url) {
        this.showQRCode = true
        share.toShareWeChat(rawData.source_url)
      } else {
        this.msgInfo('此文章暂无原文链接， 无法进行分享')
      }
    },
    async fetchData () {
      if (this.$route.query.id) {
        const res = await this.$action('getDocumentDetail', { id: this.$route.query.id })
        console.log('getDocumentDetail', res)
        this.artical.title = res.title ? res.title : ''
        this.artical.author = res.author ? res.author : ''
        this.artical.journal_name = res.journal_name ? res.journal_name : ''
        this.artical.journal_page = res.journal_page ? res.journal_page : ''
        this.artical.journal_roll = res.journal_roll ? res.journal_roll : ''
        this.artical.publish_date = res.publish_date ? res.publish_date : ''
        this.artical.viewpoint = res.viewpoint ? res.viewpoint : ''
        this.artical.abstract = res.abstract ? res.abstract : ''
        this.artical.source_url = res.source_url ? res.source_url : ''
        this.artical.annex = res.annex ? res.annex : []
        this.artical.status = res.status || res.status == 0 ? res.status : null
        this.artical.pmid = res.pmid ? res.pmid : ''
        this.artical.impact_factor = res.impact_factor ? res.impact_factor : ''
        this.artical.doi = res.doi ? res.doi : ''
        this.artical.keyword = res.keyword ? res.keyword : ''
        this.artical.virus_type = res.virus_type ? res.virus_type : ''
        this.artical.tumor_type = res.tumor_type ? res.tumor_type : ''
        this.artical.inject_mode = res.inject_mode ? res.inject_mode : ''
        this.artical.cure_method = res.cure_method ? res.cure_method : ''
      }
    }
  },
  mounted () {
    this.fetchData()
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
@import '~@/assets/styles/qrcode.scss';
.document-detail-container {
  position: relative;
  padding: 60px 0px 200px 0px;
  width: 1120px;
  margin: 0 auto;
  // .document-detail-container__bg {
  //   position: absolute;
  //   width: 100%;
  //   height: 100%;
  //   top: 0;
  //   left: 0;
  //   background-color: rgba(0, 0, 0, 0.05);
  // }
  a {
    cursor: pointer;
    color: #1890ff;
  }
  p {
    padding: 0;
    margin: 0;
  }
  .document-detail__title {
    width: 909px;
    margin: 0 auto;
  }
  .document-detail__author {
    text-align: center;
    margin-top: 16px;
  }
  .document-detail__attribute {
    padding: 0;
    margin: 0;
    text-align: center;
    margin-top: 16px;
    @include flex-def;
    @include flex-cCenter;
    flex-wrap: wrap;
  }
  .document-detail__attribute_back {
    padding: 0;
    margin: 0;
    text-align: center;
    margin-top: 16px;
    @include flex-def;
    @include flex-cCenter;
    @include flex-zCenter;
  }
  .document-detail__center {
    margin-top: 52px;
  }
  .document-detail__content {
    padding: 0px 0px;
  }
  /deep/ .a-btn-container {
    display: inline-block;
    margin-right: 17px;
    margin-top: 0px;
  }
  /deep/ .a-btn-container .btn-pattern {
    width: 89px;
    height: 35px;
    font-size: 14px;
    color: #fff;
    background-color: #10F1B5;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.21);
    word-spacing: 0px;
  }
  .pdf-container {
    margin: 72px 0px;
    height: 1118px;
  }
}
</style>